<template>
  <view class="container">
    <view class="ui-all">
      <view class="ui-list">
        <text>{{ $t('common.languageText') }}</text>
        <picker @change="confirmLangHandler" mode='selector' range-key="text" :value="localeLangIndex"
          :range="localeLangs">
          <view class="ui-list-inline">
            <view class="icon">
              <image src="@/static/images/app/language_letter@128x.png"></image>
            </view>
            <view class="text">{{ localeLangs[localeLangIndex].text }}</view>
            <image class="to" src="@/static/images/app/arrow_right@200x.png"></image>
          </view>
        </picker>
        <!-- <uni-data-picker mode='selector' :localdata="localeLangs" v-model="localeLang" @change="confirmLangHandler" /> -->
      </view>

      <view class="ui-list">
        <text>{{ $t('common.apiUrlText') }}</text>
        <uni-easyinput prefixIcon="link" v-model="apiUrl" placeholderStyle="font-size: 15px"
          :placeholder="$t('common.apiUrlText')" />
      </view>
      <view class="ui-list">
        <text>{{ $t('common.fileUrlText') }}</text>
        <uni-easyinput prefixIcon="link" v-model="fileUrl" placeholderStyle="font-size: 15px"
          :placeholder="$t('common.fileUrlText')" />
      </view>
      <view class="ui-list">
        <text>{{ $t('common.uploadUrlText') }}</text>
        <uni-easyinput prefixIcon="link" v-model="uploadUrl" placeholderStyle="font-size: 15px"
          :placeholder="$t('common.uploadUrlText')" />
      </view>
    </view>

    <view class="button-submit" hover-class="button-submit-hover" @tap="handleSubmit">
      <text>{{ $t('common.saveText') }}</text>
    </view>

    <view>
      <!-- 提示信息弹窗 -->
      <uni-popup ref="message" type="message">
        <uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
      </uni-popup>
    </view>

    <view style="margin-top: 80rpx;" />
  </view>
</template>

<script>
  import store from '@/store';
  import {
    getLocalelang,
    setLocalelang,
    getLocalelangDesc
  } from "@/locales/setupI18n";
  import {
    localeLangs
  } from '@/locales/index.d';
  import {
    getApiUrl,
    setApiUrl,
    getFileUrl,
    setFileUrl,
    getUploadUrl,
    setUploadUrl
  } from "@/utils/baseUrl";
  import {
    getLogoBase64String
  } from '@/apis/file';
  import {
    getAppTitle,
    getAppDescription
  } from '@/apis/system/admin/settings';

  var _this, js;
  export default {
    onLoad() {
      _this = this;
    },
    data() {
      return {
        localeLangs,
        localeLangIndex: 0,
        localeLang: '',
        localeLangDesc: '',
        apiUrl: '',
        fileUrl: '',
        uploadUrl: '',
        msgType: '',
        messageText: '',
      };
    },
    computed: {},
    onShow() {
      const that = this;
      // 导航栏多语言
      uni.setNavigationBarTitle({
        title: that.$t('common.setText'),
      });
      // 本地化语言
      that.localeLang = getLocalelang();
      that.localeLangDesc = getLocalelangDesc(that.localeLang);
      for (let i = 0; i < localeLangs.length; i++) {
        if (localeLangs[i].value === that.localeLang) {
          that.localeLangIndex = i;
          break;
        }
      }
      that.apiUrl = getApiUrl();
      that.fileUrl = getFileUrl();
      that.uploadUrl = getUploadUrl();
    },
    methods: {
      /** 确认语言选择 */
      confirmLangHandler(e) {
        const that = this;
        // console.log('confirm', e);

        // <uni-data-picker> 控件用
        // if(e && e.detail && e.detail.value){
        // 	const selectedVal = e.detail.value[0];
        // 	if(selectedVal && selectedVal.value){
        // 		that.localeLang = selectedVal.value;
        // 		setLocalelang(that.localeLang);
        // 		that.$i18n.locale = that.localeLang;
        // 	}
        // }

        // <picker> 控件用
        if (e && e.detail) {
          const selectedIndex = e.detail.value;
          if (selectedIndex >= 0) {
            that.localeLangIndex = selectedIndex;
            that.localeLang = that.localeLangs[that.localeLangIndex].value;
            that.localeLangDesc = that.localeLangs[that.localeLangIndex].text;

            setLocalelang(that.localeLang);
            that.$i18n.locale = that.localeLang;
          }
        }
      },
      /** 处理提交 */
      async handleSubmit() {
        const that = this;
        // setLocalelang(that.localeLang);

        if (that.apiUrl === undefined || that.apiUrl === null || that.apiUrl === '') {
          that.msgType = 'warn';
          that.messageText = that.$t('common.apiUrlText');
          that.$refs.message.open();
          return;
        }

        setApiUrl(that.apiUrl);
        setFileUrl(that.fileUrl);
        setUploadUrl(that.uploadUrl);

        uni.showToast({
          icon: 'success',
          title: that.$t('common.successText'),
          mask: true
          // duration: 2000,
          // complete:() => {
          // 	// uni.navigateBack();
          // }
        });

        //#region 系统logo处理
        const logo = await getLogoBase64String();
        if (logo) {
          await store.dispatch('setLogo', logo);
        }
        //#endregion
        //#region 系统标题处理
        const appTitle = await getAppTitle();
        if (appTitle) {
          await store.dispatch('setAppTitle', appTitle);
        }
        //#endregion
        //#region 系统描述处理
        const appDescription = await getAppDescription();
        if (appDescription) {
          if (appDescription.Description) {
            await store.dispatch('setAppDescription', appDescription.Description);
          }
          if (appDescription.Subdescription) {
            await store.dispatch('setAppSubdescription', appDescription.Subdescription);
          }
        }
        //#endregion
        //尝试刷新AccessToken和RefreshToken
        await store.dispatch('refreshAuthInfo');

        setTimeout(function() {
          uni.navigateBack();
        }, 1500);
      }
    }
  }
</script>

<style lang="less">
  page {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  .container {
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    width: 100vw;
    /* background-color: red; */
  }

  .ui-all {
    padding: 20rpx 40rpx;

    .ui-list {
      width: 100%;
      text-align: left;
      padding: 20rpx 0;
      border-bottom: solid 1px #f2f2f2;
      position: relative;

      text {
        color: #4a4a4a;
        font-size: 15px;
        vertical-align: middle;
      }

      uni-easyinput {
        vertical-align: middle;
      }

      /deep/ .uni-easyinput__content {
        background-color: #f5f5f5 !important;
      }

      .ui-list-inline {
        height: 100upx;
        padding-left: 10upx;
        border-bottom: 0;
        display: flex;
        align-items: center;

        background: #f5f5f5;

        .icon {
          flex-shrink: 0;
          width: 50upx;
          height: 50upx;

          image {
            width: 50upx;
            height: 50upx;
          }
        }

        .text {
          padding-left: 20upx;
          width: 100%;
          font-size: 15px;
          color: #666;
        }

        .to {
          flex-shrink: 0;
          width: 40upx;
          height: 40upx;
        }
      }

      .ui-list-inline:active {
        background-color: #f8f8f8;
      }
    }

  }

  .button-submit {
    color: #FFFFFF;
    font-size: 35rpx;
    width: 500rpx;
    height: 100rpx;
    background: linear-gradient(-90deg, rgba(60, 156, 255, 1), rgba(60, 156, 255, 1));
    border-radius: 50rpx;
    line-height: 100rpx;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80rpx;
  }

  .button-submit:active {
    background: linear-gradient(-90deg, rgba(60, 156, 255, 0.5), rgba(60, 156, 255, 0.5));
  }

  .button-submit-hover {
    background: linear-gradient(-90deg, rgba(60, 156, 255, 0.8), rgba(60, 156, 255, 0.8));
  }
</style>
